<template>
  <div>
    <!-- 分配数据权限弹框 -->
    <el-dialog title="分配数据权限" :visible.sync="roleShow" width="30%">
      <el-form
        ref="roleForm"
        :model="roleForm"
        :rules="roleRules"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input
            disabled
            v-model="roleForm.name"
            placeholder="请输入角色名称"
          />
        </el-form-item>
        <el-form-item label="权限范围" prop="dataScope">
          <el-select v-model="roleForm.dataScope" placeholder="请选择权限范围">
            <el-option
              v-for="item in dataScopeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option> </el-select
        ></el-form-item>
        <el-form-item label="数据权限" v-show="roleForm.dataScope == 2">
          <el-checkbox
            v-model="roleForm.deptCheckStrictly"
            @change="handleCheckedTreeConnect($event, 'menu')"
            >父子联动</el-checkbox
          >
          <el-tree
            class="tree-border"
            :data="deptOptions"
            :check-strictly="!roleForm.deptCheckStrictly"
            show-checkbox
            default-expand-all
            ref="dept"
            node-key="id"
            empty-text="加载中，请稍候"
            :props="defaultProps"
          ></el-tree>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handlerSubmit('roleForm')">确定</el-button>
          <!-- <el-button @click="close">取消</el-button> -->
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { deptTree, getRoleInfo, editRoleInfo } from "@/api/dept";
export default {
  data() {
    return {
      id: "",
      roleShow: false,
      roleForm: {
        name: "",
        dataScope: "1",
        deptIds: [],
        deptCheckStrictly: true,
      },
      roleRules: {
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        roleKey: [
          { required: true, message: "权限字符不能为空", trigger: "blur" },
        ],
        roleSort: [
          { required: true, message: "角色顺序不能为空", trigger: "blur" },
        ],
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      menuExpand: false,
      dataScopeOptions: [
        {
          value: "1",
          label: "全部数据权限",
        },
        {
          value: "2",
          label: "自定数据权限",
        },
        {
          value: "3",
          label: "本部门数据权限",
        },
        {
          value: "4",
          label: "本部门及以下数据权限",
        },
        {
          value: "5",
          label: "仅本人数据权限",
        },
      ],
      deptOptions: [],
    };
  },
  methods: {
    async openLog(row) {
      this.id = row.id;
      const checkedKeys = await this.getRoleMenuTreeselect(row.id);
      getRoleInfo(row.id).then((res) => {
        this.roleForm.name = res.data.name;
        this.roleForm.dataScope = res.data.dataScope;
        this.roleForm.deptCheckStrictly = res.data.deptCheckStrictly;
        checkedKeys.forEach((v) => {
          this.$nextTick(() => {
            this.$refs.dept.setChecked(v, true, false);
          });
        });
        this.roleShow = true;
      });
    },
    //获取部门树

    async getRoleMenuTreeselect(id) {
      const { data: res } = await deptTree(id);
      this.deptOptions = res.deptList;
      return res.checkedRoleIdList;
    },
    // 所有菜单节点数据
    getMenuAllCheckedKeys() {
      let checkedKeys = this.$refs.dept.getCheckedKeys();
      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
      return checkedKeys;
    },
    handleCheckedTreeConnect(value, type) {
      if (type == "menu") {
        this.roleForm.deptCheckStrictly = value ? true : false;
      }
    },
    handlerSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let roles = this.getMenuAllCheckedKeys();
          let params = Object.assign(this.roleForm);
          params.dataScope == '2' ? params.deptIds = roles :  params.deptIds = []
          params.id = this.id;
          editRoleInfo(params).then((res) => {
            this.$message.success("修改成功");
            this.roleShow = false;
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
